// 1. React核心库
import React from 'react';

// 2. UI组件库 - 按字母顺序
import { Descriptions, Tag, Button, Space } from 'antd';

// 3. 图标库
import { CopyOutlined } from '@ant-design/icons';

// 5. 工具库
import dayjs from 'dayjs';

// 8. 生成的类型定义 (必须使用，禁止手工定义)
import type { MessageTemplate } from '@/services/generated';

interface TemplateDetailProps {
  template: MessageTemplate | null;
  onCopy?: (content: string) => void;
}

const TemplateDetail: React.FC<TemplateDetailProps> = ({
  template,
  onCopy,
}) => {
  if (!template) {
    return <div>暂无数据</div>;
  }

  const categoryMap = {
    prompt: { color: 'blue', text: '提示词' },
    question: { color: 'green', text: '问题' },
    instruction: { color: 'orange', text: '指令' },
    creative: { color: 'purple', text: '创意' },
    technical: { color: 'red', text: '技术' },
  };

  const category = categoryMap[template.category as keyof typeof categoryMap];

  return (
    <div>
      <Descriptions column={2} bordered>
        <Descriptions.Item label="ID">{template.id}</Descriptions.Item>
        <Descriptions.Item label="模板名称">{template.name}</Descriptions.Item>
        
        <Descriptions.Item label="分类">
          <Tag color={category?.color}>{category?.text || template.category}</Tag>
        </Descriptions.Item>
        
        <Descriptions.Item label="使用次数">
          <Tag color="purple">{template.usage_count || 0} 次</Tag>
        </Descriptions.Item>
        
        <Descriptions.Item label="公开状态">
          <Tag color={template.is_public ? 'blue' : 'default'}>
            {template.is_public ? '公开' : '私有'}
          </Tag>
        </Descriptions.Item>
        
        <Descriptions.Item label="创建时间">
          {dayjs(template.created_at).format('YYYY-MM-DD HH:mm:ss')}
        </Descriptions.Item>
        
        <Descriptions.Item label="更新时间">
          {dayjs(template.updated_at).format('YYYY-MM-DD HH:mm:ss')}
        </Descriptions.Item>
        
        <Descriptions.Item label="分类">
          {template.category || '暂无'}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ marginTop: 16 }}>
        <h4>模板内容：</h4>
        <div style={{
          backgroundColor: '#f5f5f5',
          padding: '12px',
          borderRadius: '6px',
          whiteSpace: 'pre-wrap',
          fontSize: '14px',
          lineHeight: '1.6',
          marginBottom: '12px'
        }}>
          {template.content}
        </div>
        
        <Space>
          <Button 
            type="primary"
            icon={<CopyOutlined />}
            onClick={() => onCopy?.(template.content || '')}
          >
            复制内容
          </Button>
        </Space>
      </div>

      {template.category && (
        <div style={{ marginTop: 16 }}>
          <h4>分类：</h4>
          <p style={{ color: '#666' }}>{template.category}</p>
        </div>
      )}
    </div>
  );
};

export default TemplateDetail;